<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue购物车结算</title>
  <style>
   .table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }

   .table th,
   .table td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

   .table th {
      background-color: #f9f9f9;
    }

   .btn {
      background-color: #F44336;
      color: white;
      border: none;
      padding: 6px 12px;
      cursor: pointer;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <h1 style="text-align: center; color: #007BFF;">Vue购物车结算</h1>
    <table class="table">
      <thead>
        <tr>
          <th><input type="checkbox" v-model="isAllSelected" @change="selectAll"></th>
          <th>商品</th>
          <th>单价（元）</th>
          <th>数量</th>
          <th>小计（元）</th>
          <th>编辑</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in products" :key="index">
          <td><input type="checkbox" v-model="item.isSelected"></td>
          <td>
            <img :src="item.image" alt="商品图片" style="width: 50px; height: 50px;">
            {{ item.name }}<br>
            <span style="font-size: 12px; color: #999;">{{ item.specification }}</span>
          </td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="decreaseQuantity(index)" :disabled="item.quantity <= 1">-</button>
            <input type="number" v-model="item.quantity" style="width: 30px; text-align: center;">
            <button @click="increaseQuantity(index)" :disabled="item.quantity >= item.limit">+</button><br>
            <span style="font-size: 12px; color: #999;">限购{{ item.limit }}件</span>
          </td>
          <td>{{ item.price * item.quantity }}</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
      <div>
        <input type="checkbox" v-model="isAllSelected" @change="selectAll">全选
        <button @click="deleteSelected">删除选中商品</button>
        <span>共有 {{ totalProducts }} 件商品，已选择 {{ selectedProducts.length }} 件</span>
      </div>
      <div>
        <span>合计：<span style="color: #F00;">¥{{ totalPrice }}</span></span>
        <button class="btn" @click="goCheckout">去结算</button>
      </div>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        products: [
          {
            id: 1,
            name: '魅族16Xs',
            specification: '全网通公开版 珊瑚橙 6+64GB',
            price: 1499,
            quantity: 2,
            limit: 3,
            isSelected: true,
            image: 'https://example.com/meizu16xs.jpg'
          },
          {
            id: 2,
            name: '魅族16s',
            specification: '全网通公开版 凝光白 6+128GB',
            price: 2699,
            quantity: 1,
            limit: 4,
            isSelected: false,
            image: 'https://example.com/meizu16s.jpg'
          },
          {
            id: 3,
            name: '魅族16s Pro',
            specification: '全网通公开版 黑之秘境 8+128GB',
            price: 2999,
            quantity: 2,
            limit: 10,
            isSelected: true,
            image: 'https://example.com/meizu16spro.jpg'
          },
          {
            id: 4,
            name: '魅族16T',
            specification: '全网通公开版 湖光绿 8+256GB',
            price: 2499,
            quantity: 5,
            limit: 5,
            isSelected: false,
            image: 'https://example.com/meizu16t.jpg'
          }
        ],
        isAllSelected: false
      },
      computed: {
        totalPrice() {
          return this.selectedProducts.reduce((sum, item) => sum + item.price * item.quantity, 0);
        },
        totalProducts() {
          return this.products.reduce((sum, item) => sum + item.quantity, 0);
        },
        selectedProducts() {
          return this.products.filter(item => item.isSelected);
        }
      },
      methods: {
        increaseQuantity(index) {
          if (this.products[index].quantity < this.products[index].limit) {
            this.products[index].quantity++;
          }
        },
        decreaseQuantity(index) {
          if (this.products[index].quantity > 1) {
            this.products[index].quantity--;
          }
        },
        selectAll() {
          this.products.forEach(item => item.isSelected = this.isAllSelected);
        },
        deleteSelected() {
          this.products = this.products.filter(item =>!item.isSelected);
          this.isAllSelected = false;
        },
        goCheckout() {
          // 这里可以添加实际的结算逻辑，比如跳转到结算页面等
          console.log('去结算，选中商品总价：', this.totalPrice);
        }
      }
    });
  </script>
</body>

</html>